<script setup lang="ts">
	// --组合式 API 模板
	import { ref } from 'vue'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import HttpService from '../../api/index';

	const httpService = new HttpService('https://example.com/api')
	const title = ref("标题")
	const userInfo = ref(null)
	const formData = ref(null)
	// onLoad 接受 A 页面传递的参数
	onLoad((option) => {
		console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}

	});

	onShow(() => {
		console.log("B 页面 onShow");
	});

	// --loadData请求数据，直接使用，参数格式：
	const loadData = async (param : any) => {
		try {
			await httpService.request({
				url: '/users/1',
				data: param,
				method: 'GET'
			}).then((res) => {
				console.log(res);
			})
		} catch (error) {
			console.error(error)
		}
	}
	// --getData使用示例
	const getDataTest = () => {
		getData({
			storedPro: 'P_H5_ReportHead',
			paraNum: 3,
			resultSetNum: 1,
			para1: userInfo.value.userId,
			para2: formData.value
		}).then((res : any) => {
			console.log(res);
		});
	}
	// --getData请求数据,通用存储过程调用，
	/*  --参数格式：
	{
		x: '',
		y: '',
		..:..
	}
	*/
	const getData = (param : any) => {
		return new Promise((resolve, reject) => {
			httpService.request({
				url: '/api/ajax.ashx?oper=LTTG_Multifunction',
				data: param,
				method: 'GET'
			}).then((res : any) => {
				if (res.status == '1') {
					resolve(res);
				} else {
					reject('获取信息失败' + res.msg)
				}
			})
		})
	};
	const to = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
	
	const isVisible = ref(true);
	
	const toggleFade = () => {
	  isVisible.value = !isVisible.value;
	};
	
	const beforeEnter = (el: HTMLElement) => {
	  // 初始化元素的样式
	  el.style.opacity = '0';
	};
	
	const enter = (el: HTMLElement, done: () => void) => {
	  // 执行进入时的动画
	  let opacity = 0;
	  const timer = setInterval(() => {
	    opacity += 0.1;
	    el.style.opacity = opacity.toString();
	    if (opacity >= 1) {
	      clearInterval(timer);
	      done();
	    }
	  }, 50);
	};
	
	const afterEnter = (el: HTMLElement) => {
	  // 进入后的钩子
	};
	
	const beforeLeave = (el: HTMLElement) => {
	  // 离开前的钩子
	};
	
	const leave = (el: HTMLElement, done: () => void) => {
	  // 执行离开时的动画
	  let opacity = 1;
	  const timer = setInterval(() => {
	    opacity -= 0.1;
	    el.style.opacity = opacity.toString();
	    if (opacity <= 0) {
	      clearInterval(timer);
	      done();
	    }
	  }, 50);
	};
	
	const afterLeave = (el: HTMLElement) => {
	  // 离开后的钩子
	};
</script>
<template>
	<view class="page-container">
		<button @click="to">测试</button>
		<button @click="toggleFade">Toggle Fade</button>
		<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
			@before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
			<div v-if="isVisible" class="box">This box will fade in and out.</div>
		</transition>
	</view>
</template>



<style lang="less" scoped>

</style>